<template>
  <div class="order">
    <div class="order-box">
      <div class="order-title">我的子账号</div>
    </div>
    <div class="order-seek">
      <div class="seek-input">
        <div class="seek-num">
          手机号：
          <el-input v-model="userName" placeholder="请输入内容" />
        </div>
        <div>
          状态：
          <el-select v-model="status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="seek-btn">
        <button class="search-btn" @click="getData">搜索</button>
        <button class="reset-btn" @click="replacement">重置</button>
      </div>
    </div>
    <div class="table">
      <div class="account-btn">
        <div class="new-account" @click="createAccount">新建子账号</div>
        <div class="accredit" @click="dialogVisible(0)">授权子账号</div>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: '#F5F5F5'}">
        <el-table-column prop="userName" label="手机号" width="180" />
        <el-table-column prop="remark" label="备注" width="140" />
        <el-table-column prop="permission" label="我给他的权限" width="140" />
        <el-table-column prop="status" label="权限状态" :formatter="statusFormat" />
        <el-table-column prop="createTime" label="申请时间" />
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button v-if="scope.row.status===1 || scope.row.status===2" type="text" @click="clickEdit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.status===3 || scope.row.status===4" type="text" @click="clickRegrant(scope.row)">重新授权</el-button>
              <el-button v-if="scope.row.status===1 || scope.row.status===3 || scope.row.status===4" type="text" @click="clickDel(scope.row)">删除</el-button>
              <el-button v-if="scope.row.status===2" type="text" @click="clickRelieve(scope.row)">解除关系</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageParams.totalPage"
          :page.sync="pageParams.index"
          :limit.sync="pageParams.size"
          @pagination="getData"
        />
      </div>
    </div>
    <div class="dialog">
      <!--授权子账号-->
      <el-dialog
        :title="reminder"
        :visible.sync="valorisation"
        width="500px"
        :before-close="valorisationClose"
      >
        <el-form ref="authorizationForm" :model="authorizationForm" :rules="rules">
          <div class="viscount">
            <div class="security">
              <el-form-item label="授权账号：" prop="userName">
                <el-input v-model.trim="authorizationForm.userName" maxlength="11" placeholder="请输入账号" />
              </el-form-item>
            </div>
            <div class="limits">
              <el-form-item label="我给他的权限：" prop="permission">
                <el-checkbox v-model="authorizationForm.permission.advance">预选单</el-checkbox>
                <el-checkbox v-if="companyFlag" v-model="authorizationForm.permission.supervise">监管</el-checkbox>
              </el-form-item>
            </div>
            <div class="remark">
              <el-form-item label="备注：" prop="remark">
                <el-input v-model.trim="authorizationForm.remark" maxlength="12" placeholder="请输入备注" />
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <span class="confirm">
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
          <span class="cancel">
            <el-button @click="valorisationCancel">取 消</el-button>
          </span>
        </span>
      </el-dialog>
      <!--新建子账号-->
      <el-dialog
        :title="reminder"
        :visible.sync="newAccount"
        width="600px"
        :before-close="handleClose"
        class="new-account"
      >
        <el-form ref="accountForm" :model="accountForm" label-width="80px">
          <el-form-item class="title-width" label="手机号：">
            <el-input v-model="accountForm.phone" />
          </el-form-item>
          <el-form-item class="title-width" label="验证码：">
            <el-input v-model="accountForm.phone" />
            <div class="btn">获取验证码</div>
          </el-form-item>
          <el-form-item class="title-width" label="设置密码：">
            <el-input v-model="accountForm.phone" />
          </el-form-item>
          <el-form-item class="title-width" label="确认密码：">
            <el-input v-model="accountForm.phone" />
          </el-form-item>
          <el-form-item class="title-width" label="分配权限：">
            <el-checkbox v-model="accountForm.checked">预选单</el-checkbox>
          </el-form-item>
          <el-form-item class="title-width" label="备注：">
            <el-input v-model="accountForm.phone" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <span class="confirm">
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
          <span class="cancel">
            <el-button @click="cancel">取 消</el-button>
          </span>
        </span>
      </el-dialog>
    </div>
    <!--解除关系/编辑/删除/重新授权-->
    <el-dialog
      :title="reminder"
      :visible.sync="dialogue"
      width="30%"
      :before-close="dialogueClose"
    >
      <el-form v-if="dialogState == 1" ref="form" :model="form" :rules="rules">
        <el-form-item label="备注：" prop="remark">
          <el-input v-model.trim="form.remark" maxlength="12" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div v-else-if="dialogState == 4" class="detail">
        <i class="iconfont icon-warn warn" />
        <div>确定要解除与账号{{ form.userName }}的关系吗？</div>
      </div>
      <div v-else>{{ message }}</div>
      <span slot="footer" class="dialog-footer">
        <span class="confirm">
          <el-button type="primary" @click="reminderConfirm">确 定</el-button>
        </span>
        <span class="cancel">
          <el-button @click="reminderCancel">取 消</el-button>
        </span>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { getUserInfo } from '@/api/common'
import { listSecondary, grantSecondaryAccount, updateRemark, againGrandSA, removeUserRelate, cancelRelationship } from '@/api/sub-account/sub-account'
export default {
  data() {
    // 权限校验
    var checkPermission = (rule, value, callback) => {
      setTimeout(() => {
        if (this.authorizationForm.permission.advance || this.authorizationForm.permission.supervise) {
          callback()
        } else {
          return callback(new Error('请授予权限'))
        }
      }, 200)
    }
    return {
      accountForm: {
        phone: '',
        checked: true
      },
      options: [
        {
          value: 1,
          label: '待验证'
        },
        {
          value: 2,
          label: '授权中'
        },
        {
          value: 3,
          label: '已拒绝'
        },
        {
          value: 4,
          label: '已解除关系'
        }
      ],
      // 操作表单
      form: {
        id: '',
        remark: '',
        userName: '',
        permission: ''
      },
      // 授权子账号表单
      authorizationForm: {
        userName: '',
        remark: '',
        // 权限
        permission: { advance: false, supervise: false }
      },
      // 手机号
      userName: '',
      // 状态
      status: '',
      cur: 0,
      sentAccept: 1,
      valorisation: false,
      newAccount: false,
      reminder: '',
      message: '',
      dialogue: false,
      btnState: false,
      dialogState: '',
      // 标记是否为企业用户
      companyFlag: false,
      // 标记提交
      isSubmit: false,
      tableData: [],
      // 分页参数
      pageParams: {
        index: 1,
        size: 6,
        totalPage: 0
      },
      rules: {
        userName: { required: true, message: '不能为空', trigger: 'blur' },
        permission: { required: true, message: '不能为空', validator: checkPermission, trigger: 'blur' },
        remark: { required: true, message: '不能为空', trigger: 'blur' }
      }
    }
  },
  created() {
    this.getData()
    this.getUserInfo()
  },
  methods: {
    // 重置按钮
    replacement() {
      this.userName = ''
      this.status = ''
      this.getData()
    },
    // 新建子账号弹框关闭按钮
    handleClose() {
      this.newAccount = false
    },
    // 新建子账号弹框取消按钮
    cancel() {
      this.newAccount = false
    },
    dialogVisible(data) {
      this.dialogState = data
      this.valorisation = true
      if (data === 0) {
        this.reminder = '授权子账号'
      }
      if (data === 1) {
        this.reminder = '新建子账号'
      }
    },
    confirm() {
      this.valorisation = false
      this.newAccount = false
    },
    valorisationClose() {
      this.valorisationCancel()
    },
    dialogueClose() {
      this.reminderCancel()
    },
    reminderCancel() {
      this.dialogue = false
      this.form = {
        id: '',
        remark: '',
        userName: '',
        permission: ''
      }
      this.$refs.form.clearValidate()
    },
    valorisationCancel() {
      this.authorizationForm = {
        userName: '',
        remark: '',
        // 权限
        permission: { advance: false, supervise: false }
      }
      this.$refs.authorizationForm.clearValidate()
      this.valorisation = false
    },
    createAccount() {
      this.reminder = '新建子账号'
      this.newAccount = true
    },
    handerEditor(data) {
      this.dialogue = true
      if (data === 1) {
        this.dialogState = 1
        this.reminder = '编辑'
        this.message = '编辑！'
      }
      if (data === 2) {
        this.dialogState = 2
        this.reminder = '重新授权'
        this.message = '是否从新进行授权！'
      }
      if (data === 3) {
        this.dialogState = 3
        this.reminder = '删除'
        this.message = '是否删除该子账号信息！'
      }
      if (data === 4) {
        this.dialogState = 4
        this.reminder = '解除关系'
      }
    },
    // 权限状态
    statusFormat(row) {
      switch (row.status) {
        case 1:
          return '等待验证'
        case 2:
          return '授权中'
        case 3:
          return '已拒绝'
        case 4:
          return '解除关系'
        default:
      }
    },
    // 得到我的子账户列表
    getData() {
      const params = {}
      if (this.status) {
        params.status = this.status
      }
      if (this.userName) {
        params.userName = this.userName
      }
      listSecondary(this.pageParams.index, this.pageParams.size, params).then(res => {
        if (res.status === 200) {
          this.pageParams.totalPage = res.data.pages
          this.tableData = res.data.records
        }
      })
    },
    // 获取用户信息
    getUserInfo() {
      getUserInfo().then(res => {
        this.companyFlag = res.data.companyFlag
      })
    },
    // 点击编辑
    clickEdit(row) {
      this.dialogue = true
      this.dialogState = 1
      this.reminder = '编辑'
      this.form = {
        id: row.id,
        remark: row.remark
      }
    },
    // 点击重新授权
    clickRegrant(row) {
      this.dialogue = true
      this.dialogState = 2
      this.reminder = '重新授权'
      this.message = '是否从新进行授权！'
      this.form = {
        id: row.id,
        userName: row.userName,
        remark: row.remark,
        permission: row.permission
      }
    },
    // 点击删除
    clickDel(row) {
      this.dialogue = true
      this.dialogState = 3
      this.reminder = '删除'
      this.message = '是否删除该子账号信息！'
      this.form = {
        id: row.id
      }
    },
    // 点击解除关系
    clickRelieve(row) {
      this.dialogue = true
      this.dialogState = 4
      this.reminder = '解除关系'
      this.form = {
        id: row.id,
        userName: row.userName
      }
    },
    // 授权子账号
    submit() {
      this.$refs['authorizationForm'].validate(valid => {
        const { userName, remark } = this.authorizationForm
        const params = { userName, remark }
        const permission = []
        if (this.authorizationForm.permission.advance) {
          permission.push('预下单')
        }
        if (this.authorizationForm.permission.supervise) {
          permission.push('监管')
        }
        params.permission = permission.toString()
        // 重复提交
        if (this.isSubmit) {
          this.$message.error('请勿重复提交!')
          return
        }
        // 提交
        this.isSubmit = true
        grantSecondaryAccount(params).then(res => {
          if (res.code === 0) {
            this.$message.success('授权成功')
            this.valorisationCancel()
            this.getData()
          } else if (res.code === 1) {
            this.$message.error('不能给自身授权')
          } else if (res.code === 2) {
            this.$message.error('您已授权此用户，请耐心等待验证')
          } else if (res.code === 3) {
            this.$message.error('该用户已是您的子账户 无需再授权')
          } else if (res.code === -1) {
            this.$message.error('该账号未注册不可授权')
          } else {
            this.$message.error('授权失败')
          }
        }).finally((reason) => {
          this.isSubmit = false
        })
      })
    },
    // 操作弹框确定
    reminderConfirm() {
      if (this.dialogState === 1) {
        this.$refs['form'].validate(valid => {
          updateRemark(this.form).then(res => {
            if (res.code) {
              this.$message.success('保存成功')
              this.getData()
            } else {
              this.$message.error('保存失败')
            }
          })
        })
      } else if (this.dialogState === 2) {
        againGrandSA(this.form).then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            this.getData()
          } else {
            this.$message.error('操作失败')
          }
        })
      } else if (this.dialogState === 3) {
        removeUserRelate(this.form.id).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.getData()
          } else {
            this.$message.error('删除失败')
          }
        })
      } else {
        cancelRelationship(this.form).then(res => {
          if (res.code === 0) {
            this.$message.success('解除成功')
            this.getData()
          } else {
            this.$message.error('解除失败')
          }
        })
      }
      this.dialogue = false
    }
  }
}
</script>

<style scoped lang="scss">
.order {
  background: #f5f5f5;
  .order-box {
    background: #ffffff;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    border-bottom: 3px solid #e5e5e5;
    display: flex;
    .order-title {
      margin-right: 46px;
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
    }
    .order-tab {
      display: flex;
      width: 126px;
      justify-content: space-between;
      cursor: pointer;
    }
    .notAccept {
      border-bottom: 3px solid #ff3b30;
      height: 55px;
      color: #ff3b30;
    }
  }
  .order-seek {
    background: #ffffff;
    padding: 0 20px;
    height: 77px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .seek-input {
      display: flex;
      .seek-num {
        margin-right: 20px;
      }
    }
  }
  .table {
    background: #ffffff;
    padding: 20px;
    .page {
      margin-top: 39px;
      display: flex;
      justify-content: center;
    }
    .account-btn {
      display: flex;
      margin-bottom: 20px;
      .new-account {
        width: 110px;
        height: 37px;
        background: #ff3b30;
        text-align: center;
        line-height: 37px;
        color: #ffffff;
        cursor: pointer;
        border-radius: 3px;
        margin-right: 32px;
      }
      .accredit {
        border-radius: 3px;
        width: 110px;
        height: 37px;
        color: #3d3d3d;
        background: #f5f5f5;
        text-align: center;
        line-height: 37px;
        cursor: pointer;
        border: 1px solid #e5e5e5;
      }
    }
  }
  .dialog {
    .detail {
    }
    .viscount {
      line-height: 44px;
      .security {
        margin-left: 92px;
      }
      .limits {
        margin-left: 64px;
      }
      .remark {
        margin-left: 121px;
      }
    }
    .viscount-sun{
      display: flex;
      flex-direction: column;
      text-align: center;
      width: 430px;
      line-height: 48px;
      .distance{
        padding-left: 10px;

      }
      .verify{
        display:flex;
        width: 550px;
        .verify-title{
          margin-left: 82px;
        }
        .verify-code{
          width: 106px;
          height: 32px;
          background: #F5F5F5;
          border: 1px solid #E5E5E5;
          text-align: center;
          line-height: 32px;
          cursor: pointer;
          margin: 7px 0 0 10px;
        }
      }
      .remark{
        padding-left: 30px;
      }
      .control{
        .control-box{
          width: 100%;
          .control-title{
            float: left;
            margin-left: 52px;
          }
          .checkbox{
            float: left;
          }
        }
      }
    }
  }
  .detail{
    display: flex;
    align-items: center;
    justify-content: center;
    .warn{
      color: coral;
      margin-right: 10px;
      font-size: 30px;
      margin-bottom: 6px;
    }
  }
  .title-width{
    position: relative;
    .btn{
      width: 106px;
      height: 32px;
      border: 1px solid #E5E5E5;
      line-height: 32px;
      background: #F5F5F5;
      cursor: pointer;
      text-align: center;
      position: absolute;
      top: 4px;
      right: 82px;
    }
  }
  /deep/ .new-account{
    .el-form{
      padding-left: 60px;
    }
  }
  /deep/ .limits {
    .el-radio {
      //从这里开始 就是更改颜色的代码，将你的颜色           改掉我的颜色就可以了
      .el-radio__label {
        color: #6b6b6b !important;
      }
      .el-radio__input {
        margin-bottom: px(5);
        &.is-checked {
          .el-radio__inner {
            background-color: #ff3b30;
            border-color: #ff3b30;
            color: #ff3b30;
          }
        }
        .el-radio__inner {
          &:hover {
            border-color: #ff3b30;
            color: #ff3b30;
          }
        }
      }
    }
  }
  /deep/ .security{
    .el-form-item__error{
      left: 92px;
    }
  }
  /deep/ .limits{
    .el-form-item__error{
      left: 121px;
    }
  }
  /deep/ .remark{
    .el-form-item__error{
      left: 66px;
    }
  }
  /deep/ .title-width{
    .el-form-item__label{
      width: 100px !important;
    }
  }
  /deep/ .dialog {
    .el-input {
      width: 200px;
      height: 35px;
    }
  }
  /deep/ .dialog {
    .el-input {
      width: 200px;
      height: 35px;
      .el-input__inner{
        height: 35px;
      }
    }
  }

  /deep/ .table {
    .el-table {
      .cell {
        padding-left: 20px;
      }
    }
  }
  /deep/ .seek-input {
    .el-input {
      width: 130px;
      height: 35px;
      .el-input__inner {
        height: 35px;
      }
    }
  }
  /deep/ .seek-input {
    .el-select__caret {
      margin-top: 3px;
    }
  }
  /deep/ .cancel {
    .el-button:hover {
      background: #ffdbd8;
      border: 1px solid #ff3b30;
      color: #ff3b30;
    }
  }
  /deep/ .confirm {
    margin-right: 10px;
    .el-button--primary {
      background: #ff3b30;
      // color: black;
      color: #ffffff;
      border: 1px solid #ff3b30;
    }
  }
}
.el-main {
  overflow: hidden;
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f5f5f5;
    color: #e03523;
  }
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:hover {
    color: #606266;
  }
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #606266;
  }
}
/deep/ .page {
  .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: #f5f5f5;
    color: #e03523;

    background: #f5f5f5;
  }
}
</style>
